<template>
  <div class="common-wrapper">
    <div class="common-title">温湿度实时查询</div>
    <div class="common-main">
      <div class="table">
        <el-table
          ref="table"
          :data="tableData"
          style="width: 100%"
          @row-click="rowClick"
          highlight-current-row
        >
          <el-table-column
            prop="machineName"
            label="温湿度表"
            min-width="36%"
            align="center"
            class-name="table-bg"
          >
          </el-table-column>
          <el-table-column
            prop="temp"
            label="温度"
            min-width="32%"
            align="center"
          >
            <template slot-scope="{ row }">
              <span style="color: #23b899">{{ row.temp | fixedFloat }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="humidity"
            label="湿度"
            min-width="32%"
            align="center"
          >
            <template slot-scope="{ row }">
              <span style="color: #387dff"
                >{{ row.humidity | fixedFloat }}%</span
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div ref="chart" class="chart" v-loading="loading"></div>
    </div>
  </div>
</template>

<script>
import { getTempNow, getTempDay } from '@/api/env';
export default {
  data() {
    return {
      tableData: [],
      myChart: null,
      loading: false,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData(query) {
      try {
        const { data } = await getTempNow(query);
        this.tableData = data;
        this.$refs['table'].setCurrentRow(data[0]);
        this.getChartData(data[0]['machineNumber']);
      } catch (err) {
        console.log(err);
      }
    },
    async getChartData(id) {
      this.loading = true;
      const { data } = await getTempDay({ machineNumber: id });
      let time = [],
        temp = [],
        humidity = [];
      data.data.map((item) => {
        time.push(item.time);
        temp.push(parseFloat(item.temp).toFixed(1));
        humidity.push(parseFloat(item.humidity).toFixed(1));
      });
      let options = this.setOptions(time, temp, humidity);
      this.chartInit(options);
      this.loading = false;
    },
    chartInit(options) {
      if (this.myChart == null) {
        this.myChart = this.$echarts.init(this.$refs.chart);
      } else {
        this.myChart.clear();
        this.myChart = this.$echarts.init(this.$refs.chart);
      }
      this.myChart.setOption(options);
    },
    setOptions(time, temp, humidity) {
      let tempMax = 50;
      let humMax = 100;
      let option = {
        tooltip: {
          trigger: 'axis',
          textStyle: {
            fontSize: 13,
          },
          padding: 10,
          backgroundColor: 'rgba(66, 66, 89, 0.8)',
          formatter: function (params) {
            console.log(params);
            var result =
              '<div style="font-size:14px;font-weight:600;margin-bottom:4px">' +
              params[0].axisValue +
              '</div>';
            params.forEach(function (item, index) {
              result +=
                '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
                item.color +
                '"></span>';
              result += item.seriesName + '：' + item.data;
              let unit = item.seriesName == '温度' ? '℃' : '%';
              result += unit + '<br>';
            });
            return result;
          },
        },
        legend: {
          right: 10,
          data: ['温度', '湿度'],
          icon: 'circle',
        },
        grid: {
          left: '2%',
          right: '2%',
          // bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: time,
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: '#292B3D',
            fontSize: 13,
          },
          axisLine: {
            lineStyle: { color: '#EAEBF0' },
          },
        },
        yAxis: [
          {
            type: 'value',
            min: 0,
            max: tempMax,
            splitNumber: 5,
            interval: tempMax / 5,
            axisTick: { show: false },
            axisLine: { show: false },
            axisLabel: {
              show: true,
              fontSize: 13,
              textStyle: {
                color: '#292B3D',
              },
              formatter: '{value}℃',
            },
            splitLine: {
              lineStyle: {
                color: '#EAEBF0',
                type: 'dotted',
              },
            },
          },
          {
            type: 'value',
            min: 0,
            max: humMax,
            splitNumber: 5,
            interval: humMax / 5,
            nameLocation: 'end',
            axisLine: { show: false },
            axisTick: { show: false },
            splitLine: { show: false },
            axisLabel: {
              show: true,
              fontSize: 13,
              textStyle: {
                color: '#292B3D',
              },
              formatter: '{value}%',
            },
          },
        ],
        series: [
          {
            name: '温度',
            color: '#23B899',
            type: 'line',
            yAxisIndex: 0,
            symbol: 'circle',
            symbolSize: 8,
            itemStyle: {
              borderWidth: 2,
              borderColor: '#fff',
            },
            data: temp,
          },
          {
            name: '湿度',
            color: '#387DFF',
            type: 'line',
            yAxisIndex: 1,
            symbol: 'circle',
            symbolSize: 8,
            itemStyle: {
              borderWidth: 2,
              borderColor: '#fff',
            },
            data: humidity,
          },
        ],
      };
      return option;
    },
    getMaxData(data) {
      if (data % 5 == 0) {
        return data;
      } else {
        let remainder = data % 5;
        return data + (5 - remainder);
      }
    },
    rowClick(row) {
      this.myChart.clear();
      this.getChartData(row.machineNumber);
    },
  },
  filters: {
    fixedFloat(value) {
      value = parseFloat(value);
      return value.toFixed(1);
    },
  },
};
</script>

<style lang="stylus" scoped>
.common-wrapper {
  height: 100%;
}

.table {
  width: 30%;
  height: 100%;
  overflow-y: auto;
}

.common-main {
  display: flex;
}

.chart {
  width: 70%;
  height: 100%;
}

::v-deep.table .el-table th {
  background: #F8F9FB;
  color: #292B3D;
  font-size: 14px;
  font-weight: normal;
}
</style>
<style lang="stylus">
.el-table {
  .table-bg, .el-table__body tr.current-row > .table-bg {
    background: #F8F9FB;
    color: #292B3D;
  }
}
</style>
